<template>

  <div class="home-content">
    <HomeTitle category="角色管理" variety="角色列表" class="title"></HomeTitle>
    <el-row>
      <el-button type="primary" data-status="add" @click="addEdit">新增角色模块</el-button>
    </el-row>
    <div class="mt20">
      <el-table :data="tableList" border class="widthp100 cursor">
        <el-table-column prop="name" label="角色名称" align="center"></el-table-column>
        <el-table-column prop="sort" label="权重" align="center"></el-table-column>
        <el-table-column prop="createTime" label="创建时间" align="center"></el-table-column>
        <el-table-column label="操作" align="center">
          <template slot-scope="scope">
            <el-button @click="handleEdit(scope.$index, scope.row)" type="text" size="small">编辑</el-button>
            <el-button @click="handleClick(scope.row)" type="text" size="small">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>


    <el-dialog title="新增角色" :visible.sync="dialog.show" width="360px" :center="true" :append-to-body="true">
      <el-form label-width="80px" size="mini">
        <div class="prow10 pb20">
          <div class="mt15">
            <el-input ref="returnCodes" autofocus="autofocus" class="el-gray" name="" placeholder="请输入模块名称" v-model="listInfo.name">
              <template slot="prepend" class="bctran">角色名称:</template>
            </el-input>
          </div>
          <div class="mt15">
            <el-input ref="returnCodes" autofocus="autofocus" class="el-gray" name="" placeholder="请输入模块权重" v-model="listInfo.sort">
              <template slot="prepend" class="bctran">权重:</template>
            </el-input>
          </div>
          <div slot="footer" class="dialog-footer tar">
            <el-button @click="dialog.show = false" size="small">取 消</el-button>
            <el-button type="primary" @click="confirmAddEdit" size="small">确 定</el-button>
          </div>
          <!-- <div class="dialog-footer mt30 tac widthp100 block flex-justify prow10 boxsizing dialog-footer-btn">
            <el-button class="widthp100 pcol10" type="primary" @click="confirmReturnDinner" size="medium" round>确 定</el-button>
          </div> -->
        </div>
      </el-form>
    </el-dialog>
    <!-- 修改角色---s-->
    <el-dialog title="修改角色" :visible.sync="dialogEditRole.show" width="360px" :center="true" :append-to-body="true">
      <el-form label-width="80px" size="mini">
        <div class="role-item">
          <el-scrollbar class="heightp100">
            <div class="prow10 pb20 role-items">
              <el-form-item class="mt20" label="角色名称">
                <el-input v-model="listInfo.name" placeholder="请输入角色名称"></el-input>
              </el-form-item>
              <div class="flex pt15" v-for="(item,index) in ModuleTrees" :key="index">
                <el-checkbox-group class="pr10 width200 mb15" v-model="listInfo.moduleIds">
                  <el-checkbox :label="item.id" :value="item.name"
                    name="type">{{item.name}}</el-checkbox>
                </el-checkbox-group>
                <el-checkbox-group v-model="listInfo.moduleIds">
                  <el-checkbox v-for="(items,indextwo) in item.children" :key="indextwo" :label="items.id" :value="items.name"
                    name="type">{{items.name}}</el-checkbox>
                </el-checkbox-group>
              </div>
              <el-form-item class="mt20" label="权重">
                <el-input v-model="listInfo.sort" placeholder="请输入权重"></el-input>
              </el-form-item>
              <el-form-item class="mt15" v-if="addEdit" label="是否禁用">
                <el-select v-model="listInfo.disable" placeholder="请选择是否禁用">
                  <el-option label="启用" value=false>启用</el-option>
                  <el-option label="禁用" value=true>禁用</el-option>
                </el-select>
              </el-form-item>
              <div slot="footer" class="dialog-footer tar">
                <el-button @click="dialogEditRole.show = false" size="small">取 消</el-button>
                <el-button type="primary" @click="confirmAddEdit" size="small">确 定</el-button>
              </div>
              <!-- <div class="dialog-footer mt30 tac widthp100 block flex-justify prow10 boxsizing dialog-footer-btn">
              <el-button class="widthp100 pcol10" type="primary" @click="confirmReturnDinner" size="medium" round>确 定</el-button>
            </div> -->
            </div>
          </el-scrollbar>
        </div>
      </el-form>
    </el-dialog>
    <!-- 修改角色---d-->


  </div>
</template>

<script>
  import axios from 'axios';
  import Vue from 'vue';
  import {roleList} from '@/request/api'; // 导入我们的api接口
  import {addModule} from '@/request/api'; // 导入我们的api接口
  import {moduleTree} from '@/request/api';
  import {updateRole} from '@/request/api';

  /* import qs from 'qs'; */
  let listInfo = {
    name: '',
    parentId: '',
    sort: '',
    url: '',
    moduleIds: []
  };
  export default {
    name: 'module',
    data: function() {
      return {
        dialog: {
          show: false
        },
        dialogEditRole: {
          show: false
        },
        currentPage: 1,
        listInfo: listInfo,
        params: {
          limit: 10,
          pagesize: 0
        },
        tableList: [],
        ModuleTrees: [],
        listIndex:''
      }
    },
    mounted: function() {
      let params = this.$route.query; //parms包含传递的所有参数
      console.log(params);
    },
    created: function() {
      let params = this.$route.query;
      console.log(params.parentId);
      //this.params.parentId=params.parentId;
      this.getList();
    },
    methods: {
      getList(){
        roleList(this.params).then(res => {
          console.log(res);
          if (res.code === 200) {
            this.tableList = res.data.data;
          };

        });
      },
      addEdit: function(e) {
        let status = e.currentTarget.dataset.status;
        console.log(status);
        this.dialog.show = true;
      },
      /* 查看*/
      handleClick(row) {
        console.log(row);
      },
      /* 修改*/
      handleEdit(index, row) {
        console.log(index, row);
        this.listIndex=index;
        moduleTree({}).then(res => {
          console.log(res);
          this.ModuleTrees = res.data;
          this.dialogEditRole.show = true;
        });
        let rows = JSON.parse(JSON.stringify(row));
        ///if(typeof rows.moduleIds===String){
          console.log(rows);
          rows.moduleIds = rows.moduleIds.split(',').map(Number);
          this.listInfo = rows;
          this.listInfo.disable = this.listInfo.disable ? '禁用' : '启用';
        //};
      },
      confirmAddEdit: function() {
        console.log(0);
        let params=JSON.parse(JSON.stringify(this.listInfo));
        params.disable=params.disable==='true'?true:false;
         console.log(params);
        let formdata=new FormData();
            formdata.append('id',params.id);
            formdata.append('disable',params.disable);
            formdata.append('moduleIds',params.moduleIds);
            formdata.append('name',params.name);
            formdata.append('sort',params.sort);
        updateRole(formdata).then(res => {
          console.log(res.code);
          if(res.code==200){
            console.log('00000000000');
            this.dialogEditRole.show=false;
            this.getList();
           // Vue.set(this.tableList,this.listIndex,params) //这样就能被vue监控到，更新视图

          };
        });

      },

    }

  }
</script>

<style scoped>
  .role-item {
    height: 400px;

  }
  .heightp100 {
    height: 100%;
    overflow-x: hidden;
    padding-right: 10px;
  }
  .el-scrollbar__wrap {
    overflow-x: hidden;
  }
</style>
